<template>
  <div class="config">
    <div class="switch flex jcb">
      <div class="text">护眼模式</div>
      <van-switch v-model="checked" size="1.06rem" :inactive-value="0" :active-value="1" active-color="#208fff"
                  :loading="loading"
                  @input="updateInfo"
                  inactive-color="#dfdfdf" class="vam"/>
    </div>
    <div class="list">
      <gl-item class="item"
               :class="{disabled: !checked}"
               :name="item.name"
               :icon="item.icon"
               :value-text="item.valueText"
               :value="item.value"
               v-for="(item, i) in list" :key="i"
               @check="clickOperation(item)"></gl-item>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "Config",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        checked: 0,
        active: null,
        info: {},
        list: [
          {
            name: '学习时长',
            icon: require('../../images/center/config_ico_03.png'),
            value: 0,
            prop: 'learning_type',
            valueText: '未设置',
            options: [
              {label: '1小时', value: 1},
              {label: '2小时', value: 2},
              {label: '3小时', value: 3},
              {label: '4小时', value: 4},
            ],
          },
          {
            name: '休息时长',
            icon: require('../../images/center/config_ico_06.png'),
            value: 0,
            prop: 'rest_type',
            valueText: '未设置',
            options: [
              {label: '0.5小时', value: 1},
              {label: '1小时', value: 2},
              {label: '1.5小时', value: 3},
            ],
          },
          {},
        ],
        loading: false,
      }
    },
    created() {
      this.util.checkOpenId(this.getInfo);
    },
    methods: {
      updateInfo(checked) {
        checked !== undefined && (this.checked = checked === 0 ? 1 : 0);
        let is_on = checked !== undefined ? checked : this.checked;
        let obj = {};
        this.list.map(e => {
          if (e.prop) {
            !is_on && (e.value = 2);
            obj[e.prop] = e.value;
          }
        });
        this.loading = true;

        this.http.$post('webcat/api/add_protection_switch', {
          uid: this.userInfo.uid,
          is_on,
          ...obj,
        }).then(res => {
          this.loading = false;
          checked !== undefined && (this.checked = checked);
          this.getInfo();
          this.$toast.success('修改成功！');
        }).catch(err => {
          this.$err(err);
          this.loading = false;
        });
      },
      getInfo() {
        this.http.$post('webcat/api/get_protection_switch', {
          uid: this.userInfo.uid,
        }).then(res => {
          this.setInfo(res.info || {});
        }).catch(this.$err)
      },
      setInfo(info) {
        this.checked = info.is_on || 0;
        this.list.map(e => {
          if (e.prop) {
            e.value = info[e.prop] || 2;
            let item = e.options.find(o => o.value === e.value) || {};
            e.valueText = item.label || '未设置';
          }
        });
      },
      clickOperation(item) {
        if (!this.checked) return;
        this.active = item;
        let options = item.options;
        this.showPicker(options, options.indexOf(options.find(e => e.value === item.value)));
      },
      showPicker(columns, dfValue) {
        dfValue === -1 && (dfValue = 0);
        let _this = this;
        let {active} = _this;
        this.util.picker({
          columns,
          title: '选择时长',
          valueKey: 'label',
          dfValue,
          sure(res) {
            res = res[0];
            active.value = res.value;
            active.valueText = res.label;
            _this.updateInfo();
          },
        });
      },
    },
  }
</script>

<style scoped lang="less">
  .switch {
    padding: 1.34rem .96rem;
    font-size: 1.06rem;
    line-height: 1.06rem;
    color: #333;
    border-bottom: solid #f5f5f5 .63rem;
  }

  .item {
    border-bottom: .06rem solid #eee;
  }

  .disabled {
    opacity: .7;
  }
</style>
